<template>
  <div class="container">
    <page-header :title="$t('Cancellation_Title')"> </page-header>
    <div class="account_page">
      <img
        style="width: 141px; height: 141px;"
        src="@/assets/img/problem/ic_warning.svg"
      />
      <div class="account_card">
        <div class="account_card_title">
          {{ $t('Cancellation_termsTitle') }}
        </div>
        <div class="account_card_content">
          <span></span>{{ $t('Cancellation_terms01') }}
        </div>
        <div class="account_card_content">
          <span></span>{{ $t('Cancellation_terms02') }}
        </div>
        <div class="account_card_content">
          <span></span>{{ $t('Cancellation_terms03') }}
        </div>
        <div class="account_card_title" style="margin-top:26px;">
          {{ $t('Cancellation_warning01') }}
        </div>
        <div class="account_card_content">
          <span></span>{{ $t('Cancellation_warning02') }}
        </div>
      </div>
    </div>
    <bottom-button :custom="true" background="#ffffff">
      <template v-slot:custom>
        <div style="width: 100%;padding:16px 0;">
          <div class="deleteNotify">{{ $t('Cancellation_deleteNotify') }}</div>
          <div class="agreementText">
            <img
              :src="
                agreeType
                  ? require('@/assets/img/login/login_ic_check_selected.svg')
                  : require('@/assets/img/login/login_ic_check_unselected.svg')
              "
              alt=""
              @click="agreeType = !agreeType"
            /><span @click="toAgreement">{{
              $t('Cancellation_agreementText')
            }}</span>
          </div>
          <van-button @click="cancelAccount" round type="info" size="large">{{
            $t('Cancellation_IamSure')
          }}</van-button>
        </div>
      </template>
    </bottom-button>
  </div>
</template>
<script>
import $api from '@/assets/js/api/index'
import share from '@/mixins/share'
export default {
  mixins: [share],
  data () {
    return {
      agreeType: false,
      userUrls: ''
    }
  },
  created () {
    this.getLang()
  },
  mounted () {
    this.getConfigs()
  },
  methods: {
    cancelAccount () {
      if (!this.agreeType) {
        this.global.toast(this.$t('Cancellation_agreeToast'))
        return
      }
      $api.login.deleteAccount().then(res => {
        if (res.code == 0) {
          this.global.toast(res.message)
          localStorage.setItem('email', '')
          localStorage.setItem('phone', '')
          localStorage.setItem('pay_result', '')
          localStorage.setItem('loginType', '')
          this.$store.commit('login_out')
        } else {
          this.global.toast(res.message)
        }
      })
    },
    toAgreement () {
      if (!this.userUrls) return
      localStorage.setItem(
        'webUrl',
        JSON.stringify({
          url: `${this.userUrls}?lang=${this.$store.state.locale}`,
          title: 'login_termOfUse'
        })
      )

      this.$router.push({
        path: '/web-view'
      })
    },
    //获取配置数据
    getConfigs () {
      $api.login.getConfigs(true).then(res => {
        if (res.code == 0) {
          localStorage.setItem('configs', JSON.stringify(res.data))
          res.data.forEach(item => {
            if (item.key == 'terms-of-use') {
              this.userUrls = item.value
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.account_page {
  width: calc(100% - 32px);
  background: var(--page-bg);
  padding: 44px 16px 176px;
  text-align: center;
  .account_card {
    background: var(--card-bg);
    border-radius: 13px;
    padding: 16px;
    // margin-top: 24px;
    .account_card_title {
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      color: var(--text-color);
      line-height: 20px;
      margin-bottom: 8px;
    }
    .account_card_content {
      font-size: 12px;
      font-weight: 400;
      text-align: left;
      color: #39404d;
      line-height: 14px;
      padding: 7px 0;
      padding-left: 16px;
      position: relative;
      span {
        background: var(--text-color);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        position: absolute;
        left: 0px;
        top: 10px;
      }
    }
  }
}
.deleteNotify {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--text-color);
  line-height: 16px;
}
.agreementText {
  font-size: 11px;
  font-weight: 500;
  text-decoration: underline;
  text-align: center;
  color: var(--text-color);
  padding: 12px 0 26px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
  span {
    text-align: center;
    line-height: 13px;
  }
}
</style>
